<template>
  <div class="sensitive-page">
    <el-card>
      <template #header>
        <div class="header">
          <span class="title">敏感词</span>
          <el-button type="primary" @click="save" :loading="saveLoading">保存 </el-button>
        </div>
      </template>

      <el-form ref="formRef" :model="form" label-width="80px" class="form-container">
        <el-form-item label="状态" prop="state">
          <el-radio-group v-model="form.state">
            <el-radio label="1">开启</el-radio>
            <el-radio label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="处理措施" prop="handleMeasures">
          <el-radio-group v-model="form.handleMeasures">
            <el-radio label="1">禁止发布</el-radio>
            <el-radio label="2">需要审核</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="敏感词库" prop="sensitiveWord">
          <el-input
            v-model="form.sensitiveWord"
            maxlength="400"
            placeholder="1.首次添加请直接输入保存，添加多个敏感词请用逗号隔开，如：'敏感词1,敏感词...' 2.二次添加请点击编辑，在原有的敏感词后再输入"
            type="textarea"
            :rows="4"
          />
        </el-form-item>
      </el-form>

      <art-table
        :data="tableData"
        :loading="tableLoading"
        :border="true"
        :pagination="false"
        :show-header-background="true"
      >
        <el-table-column label="敏感词名称" width="220" prop="sensitiveWord" />
        <el-table-column label="是否开启">
          <template #default="scope">
            <span v-if="scope.row.state">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column label="处理措施">
          <template #default="scope">
            <span v-if="scope.row.handleMeasures == 1">禁止发布</span>
            <span v-else>需要审核</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="80">
          <template #default="scope">
            <button-table type="edit" @click="run(scope.row)" />
          </template>
        </el-table-column>
      </art-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import { sensitiveAdd, sensitiveGetAll, sensitiveUpdate } from '@/api/commentApi'
  import { ApiStatus } from '@/utils/http/status'
  import ArtTable from '@/components/Table/ArtTable.vue'
  import ButtonTable from '@/components/Form/ButtonTable.vue'

  const formRef = ref()

  const form = ref({
    sensitiveWord: '', // 敏感词库
    state: '1', // 是否开启 1-是 0-否
    handleMeasures: '2', // 处理措施 1-禁止发布 2-需审核
    id: ''
  })

  const tableLoading = ref(false)
  const saveLoading = ref(false)
  const tableData = ref<any[]>([])
  const editState = ref(false)

  onMounted(() => {
    getAll()
  })

  // 获取所有敏感词
  async function getAll() {
    try {
      tableLoading.value = true
      const res = await sensitiveGetAll()
      if (res.code === ApiStatus.success) {
        tableData.value = res.data || []
        if (tableData.value.length > 0) {
          form.value.id = tableData.value[0].id
        }
      }
    } catch (error) {
      console.error('获取敏感词失败:', error)
      ElMessage.error('获取敏感词失败')
    } finally {
      tableLoading.value = false
    }
  }

  // 添加/更新敏感词
  async function save() {
    if (!form.value.sensitiveWord.trim()) {
      ElMessage.error('请输入敏感词')
      return
    }

    try {
      saveLoading.value = true
      const fn = editState.value ? sensitiveUpdate : sensitiveAdd
      const res = await fn(form.value)

      if (res.code === ApiStatus.success) {
        ElMessage.success('操作成功')
        await getAll()
        form.value.sensitiveWord = ''
        editState.value = false
      } else {
        ElMessage.error(res.message || '操作失败')
      }
    } catch (error) {
      console.error('保存敏感词失败:', error)
      ElMessage.error('保存敏感词失败')
    } finally {
      saveLoading.value = false
    }
  }

  // 编辑敏感词
  function run(row: {
    sensitiveWord: any
    state: { toString: () => any }
    handleMeasures: { toString: () => any }
    id: any
  }) {
    editState.value = true
    form.value = {
      sensitiveWord: row.sensitiveWord,
      state: row.state.toString(),
      handleMeasures: row.handleMeasures.toString(),
      id: row.id
    }
  }
</script>

<style lang="scss" scoped>
  .sensitive-page {
    padding: 20px;

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .form-container {
      margin-bottom: 20px;

      .state-form-item {
        margin-left: -20px; // 将状态字段向左移动20px
      }
    }
  }
</style>
